@import "reset";
@import "header";
@import "footer";
@import "../utils/iconfont.css";

@function getvw($wid){
    @return ($wid / 750) * 100 + vw;
}

main{
    .search-box{
        width: getvw(270);
        height: getvw(53);
        border: 2px solid #ff9344;
        border-radius: getvw(26.5);
        font-size: 12px;
        display: flex;
        align-items: center;
        margin: getvw(40) auto getvw(30);
        input{
            width: 70%;
            height: 100%;
            border: 0px solid #ff9344;
            outline: none;
            // border-top-left-radius: getvw(26.5);
            // border-bottom-left-radius: getvw(26.5);
            margin-left: getvw(26.5);
        }
        i{
            display: inline-block;
            font-size: 20px;
            color: #ff9344;
        }
    }
}

main{
    .search-tips{
        width: getvw(515);
        margin: 0 auto;
        text-align: center;
        .search-tips-group{
            width: 100%;
            height: getvw(135);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: getvw(15);
            .tips-item{
                width: getvw(126);
                height: getvw(63);
                background-color: #dcdcdc;
                color: #5d5d5d;
                display: flex;
                a{
                    margin: auto;
                    font-size: 12px;
                }
            }
        }
    }
}

main{
    .hot-search{
        width: 95vw;
        margin: 0 auto;
        .hot-top{
            display: flex;
            justify-content: space-between;
            margin: getvw(30) 0 getvw(20);
            .hot-top-right{
                display: flex;
                align-items: center;
                i{
                    font-size: getvw(60);
                    color: #ff9344;
                }
                span{
                    font-size: getvw(35);
                    // font-weight: 600;
                }
            }
            .hot-top-left{
                height: getvw(70);
                display: flex;
                align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(40);
                }
            }
        }
        .hot-btm{
            display: flex;
            width: 100%;
            justify-content: space-between;
            .hot-btm-left{
                width: getvw(280);
            }
            .hot-btm-right{
                width: getvw(420);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .hot-btm-right-top{
                    width: 100%;
                    .hot-img-item{
                        width: 100%;
                    }
                }
                .hot-btm-right-btm{
                    display: flex;
                    justify-content: space-between;
                    .hot-img-item{
                        &:first-child{
                            width: getvw(195);
                        }
                        &:nth-child(2){
                            width: getvw(211);
                        }
                    }
                }
            }
        }
    }
}

main{
    .recommend{
        width: 95vw;
        margin: 0 auto;
        .rcd-top{
            display: flex;
            justify-content: space-between;
            margin: getvw(30) 0 getvw(20);
            .rcd-top-right{
                display: flex;
                align-items: center;
                i{
                    font-size: getvw(60);
                    color: #ff9344;
                }
                span{
                    font-size: getvw(35);
                    // font-weight: 600;
                }
            }
            .rcd-top-left{
                height: getvw(70);
                display: flex;
                align-items: center;
                i{
                    color: #ff9344;
                    font-size: getvw(40);
                }
            }
        }
        .rcd-btm{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .rcd-btm-item{
                &:first-child{
                    width: getvw(228);
                }
                &:nth-child(2){
                    width: getvw(211);
                }
                &:last-child{
                    width: getvw(220);
                }
            }
        }
    }
}
